<template>
  <div>
    <div class="show_info" @click="gameClick(game_data._id,game_data.OperSys)">
    <!-- 展示 账号数据 -->
    <!-- 第一行 账号基本信息 -->
    <van-row class="row1">
      <!-- 第一列 账号等级 -->
      <van-col span='3' class="grade">{{game_data.Grade}}级</van-col>
      <!-- 第二列 区服 -->
      <van-col span='6' class="zone">
        <span class="zone_font">正式分区</span>
        <div class="zone_icon">
          <img class="propisshow" :src="getImgPath + 'img/icon/anzhuo.svg'" v-if="game_data.OperSys == 'Android'">
          <img class="propisshow" :src="getImgPath + 'img/icon/ios.svg'" v-if="game_data.OperSys == 'IOS'">
        </div>
      </van-col>
      <!-- 第三列 价格 -->
      <van-col span="15" class="price">¥{{game_data.Price}}</van-col>
    </van-row>
    <!-- 第二行 时装数量 -->
    <van-row class="row2">
      <!-- 第一列 皮肤统计 -->
      <van-col span="19" class="skin_count user_tag">
        <span>稀世时装 {{game_data.jin_count}}</span>
        <span>奇珍时装 {{game_data.zi_count}}</span>
        <span>角色数量 {{game_data.role_count}}</span>
      </van-col>
      <!-- 第二列 收藏人数 -->
      <van-col span="5" class="coll_count">
        <span class="isshow">{{game_data.coupon}}人收藏</span>
      </van-col>
    </van-row>
    <!-- 第三行 用户tag标签 -->
    <van-row class="row3">
      <van-col span="24" class="user_tag">
        <span v-if="game_data.jin_count > 10">金装收藏家</span>
        <span v-if="game_data.zi_count > 20">紫装收藏家</span>
      </van-col>
    </van-row>
    <!-- 第四行 时装展示 -->
    <van-row class="row4">
      <van-col span="24">
        <show-skin :skin_data="game_data.skin_list"></show-skin>
      </van-col>
    </van-row>
    <!-- 第五行 分割线 -->
    <van-row class="row5">
      <van-col span="24">
        <hr class="fen">
      </van-col>
    </van-row>
    </div>
    <slot name="radio"></slot>
    <slot name="other"></slot>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import ShowSkin from "./ShowSkin"; // 时装展示部分
export default {
  name:"ShowInFo",
  props:["game_data"],
  data() {
    return {
      send_data:{}
    }
  },
  components:{
    ShowSkin
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    })
  },
  created() {
  },
  methods: {
    gameClick(id,oper){
      // console.log(id,oper);
      // this.$emit("skin_item_click",{gid:id,oper:oper});
      this.$router.push("/gooddesc?gid=" + id + "&oper="+oper);
    }
  },
}
</script>
<style lang="less" scoped>
  // 小屏幕适配
  @media screen and (max-width:3.49rem){
    .isshow{
      display: none;
    }
  }

  @media screen and (max-width:2.69rem){
    .propisshow{
      display: none;
    }
    .user_tag{
      display: none;
    }
  }
  .show_info{
    position: relative;
    z-index: 1;
    width: 100%;
    // height: 0rem;
    overflow: hidden;
    padding: 0rem 0.08rem;
    // padding-bottom: 1.9616rem;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 0rem;
    font-size: 0.12rem;
  }
  
  // 第一行 样式
  .row1{
    padding-top: 0.1rem;
  }
  .grade{
    font-size: 0.17rem;
    line-height: 0.17rem;
    font-weight: bold;
  }
  .zone_font{
    color: #888888;
    font-size: 0.12rem;
  }
  .zone_icon{
    display: inline-block;
    width: 0.18rem;
    height: 0.18rem;
    vertical-align:text-bottom;
    margin-left: 0.05rem;
    img{
      width: 100%;
    }
  }
  .price{
    text-align: right;
    color: #E74E4B;
    font-weight: bold;
    font-size: 0.17rem;
  }


  // 第二行样式
  .row2{
    padding-top: 0.02rem;
    color: #888888;
    .skin_count{
      span{
        margin-right: 0.06rem;
      }
    }
    .coll_count{
      text-align: right;
    }
  }

  // 第三行样式
  .row3{
    margin-top: 0.03rem;
    span{
      display:inline-block;
      border: 0.01rem solid #F7C1C0;
      color: #EE8381;
      margin-right: 0.04rem;
      padding: 0.01rem;
      box-sizing: border-box;
    }
  }

  // 第四行
  .row4{
    margin-top: 0.05rem;
  }

  // 第五行
  .row5{
    margin-top: 0.1rem;
    .fen{
      border: none;
      height: 0.01rem;
      background-color: #F6F6F6;
    }
  }
</style>